<template>
    <div class="car">
        <top></top>
        <nav-title>
                                <template #carTitle="parentName">
            <div class="top" >
            <div class="title clear" >
                <ul>
                    <li v-for="(item,index) in parentName.childrenName" :key="index" @click="flag=!flag" >
                        <router-link to="">{{ item }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="price">
             
                    <div class="item"><span>奥迪</span></div>
                    <div class="item"><span>考斯特</span></div>
                    <div class="item"><span>金龙</span></div>
                    <div class="item"><span>￥4000以上</span></div>
                    <div class="item"><span>￥2000-￥3999</span></div>
                    <div class="item"><span>￥1000-￥1999</span></div>
                    <div class="item"><span>￥1000以下</span></div>
               
            </div>
        </div>
  </template>
        </nav-title>
        <main-box>
                      <template #mainBoxCar="parentName">
                      <div class="tab" v-if="flag">
            <div class="item"  v-for="(car,index) in parentName.childName" :key="index">{{ car }}</div>
        </div>
           </template>
                  <template #mainBoxCarList="parentName">
                  <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in parentName.childName" :key="index"  @click.stop="active=!active">
                     
                            <div class="img " v-for="(items,i) in item" :key="i">
                              
                                     <div class="backImage"  :style="items.img" v-show="i===currentIndex"></div>
                               <!-- <swiper class="swiper" :options="swiperOption"  >
    <swiper-slide  :style="items.img"> </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
  </swiper> -->

                              <div class="mark"  @click.stop="markBtn">
                                <img  v-if="markDown" src="../../assets/images/mark/heart2.png" alt="" >
                                <img  v-else src="../../assets/images/mark/heart1.png" alt="" >
                              
                           
                              </div>
                          </div>
                    
                      <div class="house_text"  >
                          <div class="h1">
                              <div class="h1_1">别克 GL8</div>
                              <!-- <div class="h1_2">吴中区</div> -->
                          </div>
                          <div class="fun">
                              <div class="fun_p">500元</div>
                               <div class="fun_p">7小时</div>
                                <div class="fun_p">60公里</div>
                          </div>
                      </div>
                  </div>
             </div>
         </div> 
           </template>
        </main-box>
    </div>
</template>
<script>
import top from "../top";
import navTitle from "../navTitle";
import mainBox from "../mainBox";

export default {
  components: {
    top,
    navTitle,
    mainBox
  },
  data() {
    return {
      flag: false,
      markDown: 0,
      active: false,
      currentIndex: 0
    };
  },
  methods: {
    markBtn() {
      if (this.markDown == 0) {
        this.markDown = 1;
      } else {
        this.markDown = 0;
      }
    }
  }
};
</script>
<style scoped>
@import url("../../assets/css/base.css");
@import url("../../assets/font/iconfont.css");
.car {
  background-color: #121212;
}

/deep/ .mainBox .tab {
  margin-left: 5%;
  display: flex;
}
/deep/ .mainBox .tab .item {
  margin-right: 20px;
  font-size: 14px;
  margin-top: -80px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price {
  width: 100%;
  color: #fff;
  margin-left: 30px;
  padding-left: 20px;
  line-height: 80px;
  display: flex;
  justify-content: flex-start;
}
.price .item {
  margin-right: 20px;
  text-align: center;
}
.price .item span {
  font-size: 12px;
  padding: 1px 20px;
  background-color: #222222;
  border-radius: 15px;
}
.price .item span::after {
  content: "\e61a";
  font-family: "iconfont";
  font-size: 10px;
  counter-reset: red;
  margin-left: 10px;
}
.carImage {
}
.mainCon .item .house_text .fun {
  display: flex;
  justify-content: flex-start;
}
.mainCon .item .house_text .fun .fun_p {
  color: #fff;
  margin-right: 10px;
  text-align: center;
    font-size: 12px;
}
.mainCon .item .house_text .fun .fun_p::after{
    content:"|";
    font-size: 5px;
    margin-left: 5px;
    color: firebrick;
}
.mainCon .item .house_text .fun .fun_p:last-child:after{
content:"";
}
</style>

